<template>
  <div>
    <div class="text-center">
      假装是header
    </div>

    <div class="flex flex-row justify-between items-center">
      <van-image
          :src="book.imgUrl"
          class="mx-[10px]"
          fill="contain"
          height="160"
          width="120"
      />
      <div class="flex-1">
        <span>{{ book.title }}</span>
        <br/>
        <span>{{ book.typeText }}</span>
        <br/>
        <span class="overflow-hidden block line-clamp-6 max-w-[400px] mx-auto text-base leading-[1.3] text-ellipsis">{{ book.desc }}</span>
      </div>
    </div>
    <div class="ml-[15px]">
      <h4 class="p-0 m-0">全部章节(共{{novelLength }}章)</h4>
      <p v-for="item in book.list" :key="item.id" class="leading-[1.4] text-[15px] border-b border-white" @click="itemClick(item.id)">{{ item.contentTitle }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "BookDetailComponent",
  props: {
    book: {
      type: Object
    }
  },
  computed: {
    novelLength() {
      if (this.book.list){
        return this.book.list.length;
      }
      return 0;
    }
  },
  methods:{
    itemClick(itemId){
      this.$emit('itemClick',itemId)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
